<template>
  <!-- 内容主页面
          active-text-color="#93ABE7"
   -->
  <div>
    <MainTop />
    <div class="main">
      <div class="main-left">
        <el-menu
          router
          :default-active="$route.path"
          class="el-menu-vertical-demo"
        >
          <el-menu-item index="/heritage/industry" style="font-size: 16px">
            <i class="myIcon el-icon-s-home"></i>
            <span class="menuSpan" slot="title">{{
              lang === "zh_cn" ? "受灾点展示" : "Home"
            }}</span>
          </el-menu-item>

          <el-menu-item index="/DataFire" style="font-size: 16px">
            <i class="myIcon el-icon-map-location"></i>
            <span class="menuSpan" slot="title">{{
              lang === "zh_cn" ? "受灾数据" : "GeometryFind"
            }}</span>
          </el-menu-item>

          <el-menu-item index="/FireHotMap" style="font-size: 16px">
            <i class="myIcon el-icon-s-grid"></i>
            <span class="menuSpan" slot="title">{{
              lang === "zh_cn" ? "受灾情况热力图" : "UsersData"
            }}</span>
          </el-menu-item>
          <el-menu-item index="/FireBuffer" style="font-size: 16px">
            <i class="myIcon el-icon-s-claim"></i>
            <span class="menuSpan" slot="title">{{
              lang === "zh_cn" ? "省受灾情况分布" : "Measurement"
            }}</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="main-right">
        <div class="all-coverage">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

import MainTop from "../components/MainTop.vue";
export default {
  components: { MainTop },

  data() {
    return {
      isCollapse: true,
      nowUser: "暂未获取用户数据",
    };
  },

  created() {
    this.nowUser = sessionStorage.getItem("username");
    console.log(this.nowUser);
  },

  computed: {
    ...mapState(["lang"]),
  },

  methods: {
    path1() {
      window.location.href = "https://wap.miit.gov.cn/";
    },

    path2() {
      window.location.href =
        "http://www.gov.cn/xinwen/2021-04/14/content_5599500.htm";
    },
  },
};
</script>

<style scoped>
.main {
  display: flex;
}
.main .main-left {
  width: 160px;
  overflow: auto;
  height: calc(100vh - 55px);
  box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
  z-index: 9999;
  /* background-color: #393d49; */
}

.main .main-left > ul {
  width: 160px;
}
.main .main-left > .el-menu-vertical-demo > .el-menu-item,
.main .main-left > .el-menu-vertical-demo .el-submenu__title {
  font-size: 16px !important;
}
.main .main-right {
  width: calc(100% - 160px);
  /* background-color: red; */
  overflow: auto;
  height: calc(100vh - 55px);
}

.main .main-right .coverage-top {
  width: 100%;
  height: 7vh;
  /* border-bottom: #000; */
}

/* .main .main-right .all-coverage {
  
} */
.el-menu-vertical-demo {
  overflow: hidden;
}
::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}

.menuSpan {
  font-size: 15px;
  padding-left: 5px;
}
.el-menu-item:hover {
  background-color: #e3e1e1;
}
</style>
